{extend name="main"}
{block name="style"}
<style type="text/css">
	.flex-lable{width: 140px;color: #6c757d;text-align: right;padding-right: 10px;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="flex pb-3">
		<div class="flex-1">
	        <el-button
	            type="primary"
	            size="mini"
	            @click="window.open('/wechat/addKeywords')">
	            创建关键词
	        </el-button>
		</div>
		<div class="small text-secondary">当前共有：{{search.total}}个关键词</div>
	</div>
	<div class="table-responsive">
		<el-table
			ref="tableList"
	      	:data="tableData"
    		v-loading="search.ajax"
    		style="width: 100%;"
    		header-cell-class-name="table-header-DDE6FB">
	      <el-table-column
	        prop="id"
	        label="ID"
	        width="60">
	      </el-table-column>
	      <el-table-column
	        prop="keyword"
	        label="关键词"
	        width="200">
	      </el-table-column>
	      <el-table-column
	        label="回复内容">
	      	<template slot-scope="scope">
	      		<div v-html="conGetHtml(scope.row)"></div>
	      		<el-link :href="scope.row.url" v-if="scope.row.url" :underline="false" target="_blank">新页面查看</el-link>
	        </template>
	      </el-table-column>
	      <el-table-column
	        label="类型"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<span class="text-success"
		      		v-if="scope.row.type=='text'">文本</span>
		      		<span class="text-danger"
		      		v-if="scope.row.type=='event'">事件</span>
		      		<span class="text-success"
		      		v-if="scope.row.type=='image'">图片</span>
		      		<span class="text-success"
		      		v-if="scope.row.type=='video'">视频</span>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.status==1 || scope.row.status==2" 
		      		@click="setStatus(scope.row);" 
		      		:loading="scope.row.status==2">正常</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.status==0 || scope.row.status==2" 
		      		@click="setStatus(scope.row);" 
		      		:loading="scope.row.status==2">停用</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="默认"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.is_default==1 || scope.row.is_default==2" 
		      		@click="setDefault(scope.row);" 
		      		:loading="scope.row.is_default==2">默认</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.is_default==0 || scope.row.is_default==2" 
		      		@click="setDefault(scope.row);" 
		      		:loading="scope.row.is_default==2">否</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="创建时间"
	        width="200">
		      <template slot-scope="scope">
		      	<div class="small">
		          <div>{{ scope.row.create_time }}</div>
		      	</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="/"
	        width="160">
		      <template slot-scope="scope">
		        <el-button
		            type="primary"
		            plain
		            round
		            size="minism"
		            @click="window.open('/wechat/editKeywords/'+scope.row.id)">
		            编辑
		        </el-button>
		        <el-button
		            type="danger"
		            plain
		            round
		            size="minism"
		            @click="delKeywords(scope.row,scope.$index)">
		            删除
		        </el-button>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			search:{
				ajax:false,
				total:0
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
			this.initHtml();
		},
	    methods: {
	    	conGetHtml(row){
		      if (row.value) {
		        return row.value.replace(/\n/g, '<br/>');
		      }else{
		        return '';
		      }
		    },
			delKeywords(row,index){
				var _this=this;
				_this.$confirm('确定要删除【'+row.keyword+'】关键词吗？', '提示', {
					dangerouslyUseHTMLString:true,
		          	confirmButtonText: '确定',
		          	cancelButtonText: '取消',
		          	type: 'warning'
		        }).then(() => {
		        	$.getJSON('/wechat/delKeywords/'+row.id,function(ret){
		        		if (ret) {
		        			if (ret.code === 0) {
								_this.tableData.splice(index,1);
		        			}else{
		        				XYBase.msg(ret.msg);
		        			}
		        		}
		        	});
		        }).catch(() => {
		        	XYBase.msg('已取消');
		        });
			},
	    	setDefault(data){
	      		var _this=this;
	    		if (data.is_default==2) return;
	    		var is_default=1,oldStatus=data.is_default;
	    		if (data.is_default) is_default=0;
	    		data.is_default=2;
	    		$.getJSON('/wechat/setKeywordsDefault/'+data.id+'/'+is_default,function(ret){
	    			data.is_default=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					for (var i = 0; i < _this.tableData.length; i++) {
	    						if (_this.tableData[i].is_default)
	    							_this.tableData[i].is_default=0;
	    					}
	    					data.is_default=is_default;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
	    	setStatus(data){
	    		if (data.status==2) return;
	    		var status=1,oldStatus=data.status;
	    		if (data.status) status=0;
	    		data.status=2;
	    		$.getJSON('/wechat/setKeywordsStatus/'+data.id+'/'+status,function(ret){
	    			data.status=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.status=status;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		    filterHandlerStatus(value, row, column) {
        		return row.status === value;
		    },
		    filterHandlerType(value, row, column) {
        		return row.type === value;
		    },
		    filterHandlerIsCompany(value, row, column) {
        		return row.is_company === value;
		    },
	      	initHtml() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
</script>
{/block}